<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>
    <style>
    </style>
</head>
<body>
{#导航条开始#}
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Web资源库</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"> <span class="sr-only">(current)</span></a></li>
                <li><a href="{% url 'app01_file_home' %}">用户笔记</a></li>
                <li><a href="{% url 'app01_home' %}">用户帖子</a></li>
                <li><a href="{% url 'app01_web_home' %}">web资源库</a></li>
                {% block home %}

                {% endblock %}
            </ul>
{#        数据库搜索功能#}
            <form class="navbar-form navbar-left" method="post" action="{% url 'app01_search' %}" >
                {% csrf_token %}
                <div class="form-group">
                    <input type="text"  class="form-control" placeholder="右边选择搜索对象" id="serach_cont_id" name="content">
                </div>
                <select name="choice" id="select_id" class="form-control">
                    <option value="11"> 资源</option>
                    <option value="10">班级</option>
                    <option value="100">用户</option>
                    <option value="200">帖子</option>
                    <option value="300">笔记</option>
                </select>
                <input hidden value="{{ request.get_full_path_info }}" name="url">
                <button class="btn btn-sm">提交</button>

            </form>

{#         全文搜索功能#}
{#            <form class="navbar-form navbar-left" action="/search/" method="get">#}
{#                <div class="form-group">#}
{#                    <input type="text"  class="form-control" placeholder="右边选择搜索对象" id="serach_cont_id" name="q">#}
{#                </div>#}
{#                <input type="submit" value="提交" class="form-control">#}
{#            </form>#}
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    <li><a href="#">用户：{{ request.user.username }}</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            更多操作 <span class="caret"></span></a>
                        <ul class="dropdown-menu"> <!--通过模态框的id来触发模态框-->
                            <li><a href="#" data-toggle="modal" data-target="#myModel">修改密码</a>

                            </li>
                            <li><a href="/app01/change_avatar?url={{ request.get_full_path_info }}">修改头像</a></li>
                            <li><a href="{% url 'app01_backend' %}">个人管理</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/app01/logout/">退出登录</a></li>

                        </ul>
                        {#修改密码模态框开始#}
                        <!--模态框生效的关键： data-toggle="modal" data-target=".bs-example-modal-lg" id ='Mymodel' -->
                        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                             id="myModel">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-6 col-md-offset-2">
                                                <h2 class="text-center">修改密码</h2>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 col-md-offset-2">
                                                <div class="form-group">
                                                    <label for="set_user">用户名</label>
                                                    <input type="text" disabled id="set_user"
                                                           value="{{ request.user.username }}" class="form-control">

                                                </div>
                                                <div class="form-group">
                                                    <label for="id_old_pwd">原密码</label>
                                                    <input type="password" id="id_old_pwd" class="form-control">


                                                </div>
                                                <div class="form-group">
                                                    <label for="id_new_pwd">新密码</label>
                                                    <input type="password" id="id_new_pwd" class="form-control">

                                                </div>
                                                <div class="form-group">
                                                    <label for="id_confirm_pwd">确认密码</label>
                                                    <input type="password" id="id_confirm_pwd" class="form-control">

                                                </div>
                                                <p><span style="color: red" id="error"></span></p>
                                                <button class="btn btn-success btn-sm" id="id_editer">确定修改</button>
                                                <button type="button" class="btn btn-primary btn-sm"
                                                        data-dismiss="modal">取消修改
                                                </button>
                                                <br>
                                                <br>


                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {#修改密码模态框结束#}

                    </li>
                {% else %}

                    <li><a href="{% url 'app01_register' %}">注册</a></li>
                    <li><a href="{% url 'app01_login' %}">登录</a></li>
                {% endif %}


            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

{#导航条结束#}
{#<form role="search" method="get" id="searchform" action="{% url 'haystack_search' %}">#}
{#  <input type="search" name="q" placeholder="搜索" required>#}
{#  <button type="submit"><span class="ion-ios-search-strong"></span></button>#}
{#</form>#}

{#首页布局开始#}
<div class="container">
    <div class="row">
        <!--左侧布局开始-->
        <div class="col-md-2">
            <!--面版设计-->
{#            <div class="panel panel-primary">#}
{#                <div class="panel-heading">#}
{#                    <h3 class="panel-title">推荐文章</h3>#}
{#                </div>#}
{#                <div class="panel-body">#}
{#                   {% for foo in good_article %}#}
{##}
{#                        <a href="/app01/site/{{ foo.blog.userinfo.username }}/article/{{ foo.id }}/?url={{ request.get_full_path_info }}">{{ foo.title }} <span class="glyphicon glyphicon-comment">({{ foo.comment_num }})</span></a>#}
{#                       <br>#}
{#                       <br>#}
{#                   {% endfor %}#}
{##}
{#                </div>#}
{#            </div>#}
{#            <div class="panel panel-danger">#}
{#                <div class="panel-heading">#}
{#                    <h3 class="panel-title">推荐文件</h3>#}
{#                </div>#}
{#                <div class="panel-body">#}
{#                    {% for file in good_file %}#}
{#                        <a href="/app01/preview_file/?file_id={{ file.id }}&url={{ request.get_full_path_info }}">{{ file.name }} <span class="glyphicon glyphicon-download-alt">({{ file.number }})</span></a>#}
{#                        <br>#}
{#                        <br>#}
{#                    {% endfor %}#}
{#                    #}
{#                </div>#}
{#            </div>#}
{#            推荐的帖子和web资源#}
            {% block left %}
                {% load my_tag %} <!--加载inclusion_tag函数-->
            {% article_left request %}

            {% endblock %}

{#            把request作为参数传递进去，有很大用处#}
        </div>
        <!--左侧布局结束-->

        <!--中间文章展示布局开始-->
        <div class="col-md-8">

            {% block center_content %}
                <!--页面的内容开始-->
                <!--bootstrap的媒体对象-->
                 <div class="text-center"> <h3>用户帖子</h3></div>
                <div>
                    {% for page,user_lis in url_dic.items %}

                        <div class="media "><!--用户点击文章标题就可以进入到文章详情表中-->
                            <h4 class="media-heading"><a
                                    href="/app01/site/{{ user_lis.1 }}/article/{{ page.id }}?url={{ request.get_full_path_info }}" target="_blank">{{ page.title }}</a></h4>
                            <div class="media-left ">

                                <a href="#">

                                    <img class="media-object img-circle" src="/media/{{ user_lis.0 }}" alt="加载中"
                                         height="64"
                                         width="64">
                                </a>
                            </div>
                            <div class="media-body">

                                <p> {{ page.desc }}</p>
                                {#                           <p>{{ page.content }}</p>#}
                                <p>
                                <div class="row">
                                    <div class="col-md-4">发布于：{{ page.create_time }}</div>
                                    <!--改超链接直接到用户的站点首页上-->
                                    <div class="col-md-2 float-left"><a
                                            href="{% url 'app01_site' username=user_lis.1 %}">作者：{{ user_lis.1 }}</a>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <a href="#">点赞 <span class="glyphicon glyphicon-thumbs-up">{{ page.up_num }}</span></a>
                                            </div>
                                            <div class="col-md-4">
                                                <a href="#"> 踩他<span
                                                        class="glyphicon glyphicon-thumbs-down">{{ page.down_num }}</span></a>

                                            </div>
                                            <div class="col-md-4">
                                                <a href="#">评论<span class="glyphicon glyphicon-pencil">{{ page.comment_num }}</span></a>

                                            </div>
                                        </div>

                                    </div>

                                </div>
                                </p>


                            </div>
                        </div>

                        <hr>

                    {% endfor %}
                </div>
                <!--页面的内容结束-->
                <!--页码的开始-->
                <div class="pager">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {{ page_html }}
                        </ul>
                    </nav>
                </div>
                <!--页码的结束-->
            {% endblock %}
        </div>
        <!--中间文章展示布局结束-->

        <!--右侧布局开始-->

        <div class="col-md-2">
            <!--面版设计-->
{#            <div class="panel panel-primary">#}
{#                <div class="panel-heading">#}
{#                    <h3 class="panel-title">最新发表文章</h3>#}
{#                </div>#}
{#                <div class="panel-body">#}
{#                   {% for new_a in new_article %}#}
{#                       <a href="/app01/site/{{ new_a.blog.userinfo.username }}/article/{{ new_a.id }}/?url={{ request.get_full_path_info }}">{{ new_a.title }}</a>#}
{#                       <br>#}
{#                       <br>#}
{#                   {% endfor %}#}
{##}
{#                </div>#}
{#            </div>#}
{#            <div class="panel panel-danger">#}
{#                <div class="panel-heading">#}
{#                    <h3 class="panel-title">最新上传文件</h3>#}
{#                </div>#}
{#                <div class="panel-body">#}
{#                    {% for new_file in new_files %}#}
{#                        <a href="/app01/preview_file/?file_id={{ new_file.id }}&url={{ request.get_full_path_info }}">{{ new_file.name }}</a>#}
{#                        <br>#}
{#                        <br>#}
{#                    {% endfor %}#}
{##}
{#                </div>#}
{#            </div>#}
{#            最新的帖子和web资源的展示#}
            {% block right %}
              {% load my_tag %} <!--加载inclusion_tag函数-->
            {% article_right request %}
            {% endblock %}


        </div>
        <!--右侧布局结束-->
    </div>
</div>

{#首页布局结束#}

{% block js %}


    <script>

       //搜索的ajax请求
        $('#search_btn_id').click(function () {
            let serach_cont = $('#serach_cont_id').val()
            let choice = $('#select_id option:selected').val()
            $.ajax({
                url:'/app01/search/',
                type:'post',
                data:{'content':serach_cont,'choice':choice},
                success:function (array) {
                    alert(array.code)

                }
            })

        })

        //修改密码的ajax请求
        $('#id_editer').on('click', function () {
            let old_pwd = $('#id_old_pwd').val()
            let new_pwd = $('#id_new_pwd').val()
            let confirm_pwd = $('#id_confirm_pwd').val()
            $.ajax({
                url: '/app01/set_password/',
                type: 'post',
                data: {
                    'old_pwd': old_pwd,
                    'new_pwd': new_pwd,
                    'confirm_pwd': confirm_pwd,
                    //'csrfmiddlewaretoken':{{ csrf_token }}
                },
                success: function (array) {
                    if (array.code === 1000) {
                        {#parent.location.href='/app01/login/'#}
                        //刷新当前url
                        alert('修改密码成功，重新登录')
                        window.location.reload()
                    } else {
                        $('#error').text(array.msg)
                    }

                }
            })

        });
    </script>

{% endblock %}


</body>
</html>